<template>
    <h1>自定义hook</h1>
    <div class="container">
        求和结果为: {{sum}}-{{ double }}
        <button @click="add">+1</button>
        <hr>
        <div style="display: flex; flex-wrap: wrap;">
            <img v-for="(dog,index) in dogList" :key="index" :src="dog" alt="">
        </div>
        <button @click="addDog">再来一只狗</button>
        
    </div>
</template>

<script setup lang="ts">
    import useSum from '@/hooks/useSum'
    import useDog from '@/hooks/useDog'

    const {sum,double,add} = useSum()
    const {dogList,addDog} = useDog()

</script>

<style scoped>
    .container{
        background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    img{
        height: 200px;
        margin-right: 10px;
    }
</style>